<template>
    <div class="common-layout">
      <el-container>
        <el-header style="height: 80px;">
          <div class="top-navbar">
            <div class="logo">生产</div>
            <div class="nav-right">
              <el-input placeholder="搜索" prefix-icon="el-icon-search" size="small" style="width: 160px; margin-right: 16px;" />
              <el-icon style="margin-right: 8px;"><User /></el-icon>
              <el-icon><Setting /></el-icon>
            </div>
          </div>
        </el-header>
        <el-container style="height: 1000px;">
          <el-aside width="240px" class="side-menu">
            <el-tree
              :data="menuData"
              :props="defaultProps"
              highlight-current
              default-expand-all
              class="menu-tree"
              @node-click="handleMenuClick"
            />
          </el-aside>
          <el-main style="border: 2px solid #dddddd" class="main-content">
              <RouterView />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  
  <script lang="ts" setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    User,
  } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  const router= useRouter();
  const menuData = [
    {
      label: '生产管理',
      children: [
        {
          label: '物料管理',
          children: [
            {
              label: '物料列表',
              // children: [
              //   { label: '溯源管理' },
              //   { label: '溯源管理-溯源详情' },
              // ]
            }
          ]
        },
      ]
    }
  ]
  const defaultProps = {
    children: 'children',
    label: 'label'
  }

  function handleMenuClick(node:any) {
    if (node.label === '物料列表') {
      router.push({ name:'Material'}) // 或 router.push('/list')
    }
  }
  </script>
  
  <style scoped>
  .side-menu {
    background: #f7f8fa;
    border-right: 1px solid #e4e7ed;
    min-height: 100vh;
    box-shadow: 2px 0 8px rgba(0,0,0,0.03);
    padding-top: 12px;
  }
  .menu-tree {
    background: transparent;
    padding-left: 12px;
    font-size: 15px;
  }
  .menu-tree .el-tree-node__content {
    border-radius: 6px;
    margin-bottom: 2px;
    transition: background 0.2s, color 0.2s;
  }
  .menu-tree .el-tree-node__content:hover {
    background: #e6f7ff;
    color: #409eff;
  }
  .menu-tree .el-tree-node.is-current > .el-tree-node__content {
    background: #409eff;
    color: #fff;
  }
  
  .top-navbar {
    display: flex;
    align-items: center;
    background: #222;
    color: #fff;
    padding: 0 32px;
    height: 56px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .logo {
    font-size: 18px;
    font-weight: bold;
    margin-right: 32px;
  }
  .nav-radio-group .el-radio-button__inner {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 20px;
    margin: 0 4px;
  }
  .nav-radio-group .is-active .el-radio-button__inner {
    background: #409eff;
    color: #fff;
  }
  .nav-right {
    display: flex;
    align-items: center;
    margin-left: auto;
  }
  
  .main-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin: 24px;
    padding: 24px;
    min-height: 600px;
  }
  </style>